<template>
  <div id="cesiumContainer"></div>
</template>
<script>
// 加载 Cesium
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
var viewer // 视图
export default {
  mounted() {
    this.initHandle()
  },
  methods: {
    /* *********************初始化 start********************* */
    initHandle() {
      var viewerOption = {
        homeButton: false,
        // sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false
      }
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'
      viewer = new Cesium.Viewer('cesiumContainer', viewerOption)

      // 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = 'none'

      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end

      // 加载底图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: require('../../../images/worldimage.jpg')
        })
      )
      // viewer.entities.add({
      //   name: '带黑色轮廓的绿色圆柱体',
      //   position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 20.0),
      //   cylinder: {
      //     length: 40.0,
      //     topRadius: 20.0,
      //     bottomRadius: 20.0,
      //     material: Cesium.Color.GREEN.withAlpha(0.5),
      //     outline: true,
      //     outlineColor: Cesium.Color.DARK_GREEN
      //   }
      // })

      const pt = Cesium.Cartesian3.fromDegrees(-100.0, 40.0)
      viewer.entities.add({
        position: pt,
        billboard: {
          image: require('../../../images/facility.gif'),
          eyeOffset: new Cesium.CallbackProperty(function() {
            const position = viewer.camera.position.clone()
            const xoff = position.x - pt.x
            // const yoff = position.y - pt.y
            const zoff = position.z - pt.z
            // let s = Math.sqrt(yoff*yoff+xoff*xoff+zoff*zoff);
            const s = Math.sqrt(xoff * xoff + zoff * zoff)
            const tx = xoff * 22 / s
            // const ty = yoff * 22 / s
            const tz = zoff * 22 / s
            // return new Cesium.Cartesian3(tx, ty, tz);
            return new Cesium.Cartesian3(tz, 20, tx)
          }, true),
          translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
          // pixelOffset : new Cesium.Cartesian2(-21, -21), // default: (0, 0)
          // eyeOffset : new Cesium.Cartesian3(21.0, 21.0, 10.0), // default

          // horizontalOrigin : Cesium.HorizontalOrigin.CENTER, // default
          // verticalOrigin : Cesium.VerticalOrigin.BOTTOM, // default: CENTER
          scale: 3.0 // default: 1.0
          // color : Cesium.Color.LIME, // default: WHITE
          // rotation : Cesium.Math.PI_OVER_FOUR, // default: 0.0
          // alignedAxis : Cesium.Cartesian3.ZERO, // default
          // width : 100, // default: undefined
          // height : 25 // default: undefined
        }
      })

      viewer.zoomTo(viewer.entities)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
